<template>
	<view class="container">
		<view class="title">{{ title }}</view>
		<view class="content">
			<text>教师: {{ teachers }}</text>
			<text class="content-item">{{ detail }}</text>
		</view>
		<view class="text">
			<view class="text-item">
				<view>课程名称：{{ title }}</view>
				<view>考试名称：专题一 改革的实践续篇 现代化的时代新篇</view>
				<view>开始时间：2024-03-17 9:30</view>
				<view>结束时间：2024-03-17 23:59</view>
				<view>考试形式：自主考试</view>
				<view>考试过程中如果出现页面卡死、题目空白情况，请尝试切换网络或退出重新进入考试</view>
			</view>
		</view>
		<view class="item" v-for="(item, index) in list" :key="index" @click="shijuan">
			<view>
				<image class="item-image" :src="item.image"></image>
			</view>
			<view class="item-1">
				<text class="item-text">{{ item.text }}</text>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '', // 动态标题
				teacher: '', // 动态教师信息
				detail: '',
				list: [{
						id: 1,
						image: '/static/image/通知.png',
						text: '专题一 改革的实践续篇 现代化的时代新篇',
					},

				],
			};
		},
		onLoad(options) {
			// 从 URL 参数中获取数据
			if (options.title) {
				this.title = decodeURIComponent(options.title); // 解码标题
			}
			if (options.teachers) {
				this.teachers = decodeURIComponent(options.teachers); // 解码教师信息
			}
			if (options.detail) {
				this.detail = encodeURIComponent(options.detail); // 解码教师信息
			}
			// 设置页面标题
			uni.setNavigationBarTitle({
				title: this.title,
			});
		},
		methods: {
			shijuan() {
				uni.navigateTo({
					url: `/pages/shijuan/shijuan`
				})
			},
		},
	};
</script>

<style>
	.container {
		background-color: white;
		height: 900px;
		padding: 20px;
	}

	.title {
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 20px;
	}

	.content {
		font-size: 18px;
		color: #666;
	}

	.content-item {
		margin-left: 10px;
	}

	.text {
		border-top: 1px solid gray;
		margin-top: 25px;
	}

	.text-item {
		margin-top: 20px;
		font-size: 16px;
		line-height: 1.8;
	}

	.item {
		display: flex;
		align-items: center;
		background-color: white;
		box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
		border-radius: 5px;
		margin-top: 25px;
		width: 100%;
		height: 90px;
		border-radius: 2px;
	}

	.item-image {
		width: 65px;
		height: 65px;
		border-radius: 8px;
		margin-left: 15px;
		display: flex;
		align-items: center;
	}

	.item-1 {
		flex: 1;
		padding: 15px;
	}

	.item-text {
		font-size: 15px;
		color: #333;
	}
</style>